<template>
  <a-drawer v-model:open="open"
            :keyboard="false"
            title="船员下船"
            :mask-closable="false"
            width="50%"
            wrap-class-name="full-modal"
            @close="handleClose"
            @cancel="handleClose">
    <div class="content-body container">
      <a-row :gutter="40">
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw"><span class="mr6">船名：</span><span>{{currentObj.chuanBoMing}}</span></div>
        </a-col>
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw"><span class="mr6">船员姓名：</span><span>{{currentObj.zaiChuanChuanYuanMing}}</span></div>
        </a-col>
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw"><span class="mr6">职位：</span><span>{{currentObj.zhiWei}}</span></div>
        </a-col>
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw"><span class="mr6">兼任职务：</span><span>{{currentObj.jianRenZhiWu}}</span></div>
        </a-col>
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw"><span class="mr6">上船日期：</span><span>{{currentObj.shangChuanRiQi}}</span></div>
        </a-col>
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw"><span class="mr6">上船当天出勤：</span><span>{{currentObj.shangChuanChuQin || 0}} 天</span></div>
        </a-col>
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw"><span class="mr6">船员身份号：</span><span>{{currentObj.shangChuanYuanShenFenHao}}</span></div>
        </a-col>
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw"><span class="mr6">船员手机号：</span><span>{{currentObj.shangChuanYuanShouJiHao}}</span></div>
        </a-col>
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw"><span class="mr6">任职说明：</span><span>{{currentObj.renZhiShuoMing}}</span></div>
        </a-col>
      </a-row>


      <a-row :gutter="40"  class="mt20">
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw mb10">
            <div class="mr6 mb10"><span class="red mr2">*</span>下船日期：</div>
            <a-date-picker class="w100" maxlength="100" v-model:value="formState.xiaChuanRiQi" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
          </div>
        </a-col>

        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw mb10">
            <div class="mr6 mb10"><span class="red mr2">*</span>下船原因：</div>
            <a-select
                ref="select"
                class="w100"
                placeholder="请选择"
                allow-clear
                show-search
                style="width: 120px"
                v-model:value="formState.xiaChuanYuanYin">
              <a-select-option v-for="item in xiachuanList" :key="item.name" :value="item.name">{{item.name}}</a-select-option>
            </a-select>
          </div>
        </a-col>

        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw mb10">
            <div class="mr6 mb10">下船港口：</div>
            <a-input maxlength="100" v-model:value="formState.xiaChuanGangKou" placeholder="请填写"/>
          </div>
        </a-col>

        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw mb10"><div class="mr6 mb10">备注：</div>
            <a-textarea maxlength="400" v-model:value="formState.xiaChuanBeiZhu" :rows="1" placeholder="请填写"/>
          </div>
        </a-col>

        <a-col class="gutter-row" :span="24">
          <div class="gutter-box fw mb10">
            <a-checkbox v-model:checked="jieticheck">
              是否存在接替船员
            </a-checkbox>
          </div>
        </a-col>
      </a-row>

      <a-row :span="24" :gutter="40" v-show="jieticheck">
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw mb10"><div class="mr6 mb10"><span class="red mr2">*</span>接替船员：</div>
            <a-select
                ref="select"
                class="w100"
                placeholder="请选择"
                allow-clear
                show-search
                style="width: 120px"
                @change="(value,option)=>handleChangeJieTiChuanYuan(value,option)"
                v-model:value="formState.jieTiChuanYuanMing">
              <a-select-option v-for="item in chuanyuanList" :key="item.id" :value="item.xingMing">
                {{item.xingMing }}
              </a-select-option>
            </a-select>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw mb10"><div class="mr6 mb10">兼任职务：</div>
            <a-select
                v-model:value="formState.jianRenZhiWu"
                ref="select"
                class="w100"
                placeholder="请选择"
                allow-clear
                style="width: 120px">
              <a-select-option v-for="item in zhiweiList" :key="item.id" :value="item.zhiWeiMing">{{
                  item.zhiWeiMing
                }}
              </a-select-option>
            </a-select>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw mb10">
            <div class="mr6 mb10">接替船员身份号：</div>
            <a-input :rows="1" placeholder="" maxlength="400" disabled v-model:value="formState.jieTiChuanYuanShenFenHao"/>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw mb10">
            <div class="mr6 mb10">接替船员手机号：</div>
            <a-input :rows="1" placeholder="" maxlength="400" disabled v-model:value="formState.jieTiChuanYuanShouJiHao"/>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="24">
          <div class="gutter-box fw mb10"><div class="mr6 mb10">任职说明：</div><a-textarea :rows="2" v-model:value="formState.renZhiShuoMing" maxlength="400" placeholder="请填写"/></div>
        </a-col>
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw mb10"><div class="mr6 mb10"><span class="red mr2">*</span>上船日期：</div><a-date-picker v-model:value="formState.shangChuanRiQi"  class="w100" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/></div>
        </a-col>
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw mb10"><div class="mr6 mb10">上船港口：</div><a-input placeholder="请填写" v-model:value="formState.shangChuanGangKou" maxlength="100" /></div>
        </a-col>
        <a-col class="gutter-row" :span="24">
          <div class="gutter-box fw mb10"><div class="mr6 mb10">备注：</div><a-textarea :rows="2" placeholder="请填写" v-model:value="formState.jieTiBeiZhu" /></div>
        </a-col>
      </a-row>
    </div>
    <template #footer>
      <div class="gui-padding">
        <a-button type="primary" @click="handleSubmit" :loading="addLoading" class="mr10">保存</a-button>
        <a-button type="default" @click="handleClose">取消</a-button>
      </div>
    </template>
  </a-drawer>
</template>
<script setup>
const currentObj = ref({})
const zhiweiList = ref([])
const chuanyuanList = ref([])
const jieticheck = ref(false)
const open = ref(false)
const addLoading = ref(false)
const emits = defineEmits(["success"])
const userState = useStore.userState()
const xiachuanList = computed(() => userState.getParameterList('xcyy'))
const formState = ref({
  id: "",
  xiaChuanRiQi: null,
  xiaChuanYuanYin: null,
  xiaChuanGangKou: "",
  xiaChuanBeiZhu:"",
  cunZaiJieTi: 0,
  jieTiChuanYuanId: "",
  jieTiChuanYuanMing: "",
  jianRenZhiWu: "",
  jieTiChuanYuanShenFenHao:"",
  jieTiChuanYuanShouJiHao:"",
  renZhiShuoMing: "",
  shangChuanRiQi: null,
  shangChuanGangKou: "",
  jieTiBeiZhu: ""
})

const handleLoadChuanYuanData = async () => {
  var res = await useLoadChuanYuanKuBiaoApi()
  chuanyuanList.value = res.data
}
const handleLoadZhiweiData = async () => {
  var res = await useLoadChuanBoZhiWeiBiaoApi()
  zhiweiList.value = res.data
}

const handleSubmit = async () => {
  try {
    addLoading.value = true
    if(!formState.value.xiaChuanRiQi){
      useMessage().error("请输入下船日期")
      addLoading.value = false
      return false;
    }
    if(!formState.value.xiaChuanYuanYin){
      useMessage().error("请输入下船原因")
      addLoading.value = false
      return false;
    }
    if (jieticheck.value) {
      if(!formState.value.jieTiChuanYuanId){
        useMessage().error("请输入上船船员")
        addLoading.value = false
        return false;
      }
      if(!formState.value.shangChuanRiQi){
        useMessage().error("请输入上船日期")
        addLoading.value = false
        return false;
      }
    }

    formState.value.cunZaiJieTi = jieticheck.value ? 1:0;
    await useLoadChuanYuanDiaoPeiXCApi(formState.value)
    addLoading.value = false
    useMessage().success("操作成功")
    emits("success")
    handleClose()
  } catch (e) {
    addLoading.value = false
    useMessage().error(e.msg)
  }
}

const handleOpen = async (record) => {
  open.value = true;
  formState.value.id = record.id
  formState.value.zhiWei = record.zhiWei
  await handleLoadChuanYuanData()
  await handleLoadZhiweiData()
  const resp2 = await useGetChuanYuanDiaoPeiApi(record.id)
  const resp = await useGetChuanYuanDiaoPeiJTApi(record.id)
  currentObj.value = resp2.data
  if (resp.data) {
    jieticheck.value = resp.data.xiaRenChuanYuanId > 0;
    formState.value.cunZaiJieTi = resp.data.xiaRenChuanYuanId > 0 ? 1 : 0;
    formState.value.jieTiChuanYuanId = resp.data.xiaRenChuanYuanId;
    formState.value.jieTiChuanYuanMing = resp.data.xiaRenChuanYuanMing;
    formState.value.jianRenZhiWu = resp.data.jianRenZhiWu;
    formState.value.renZhiShuoMing = resp.data.renZhiShuoMing;
    formState.value.shangChuanRiQi = resp.data.jiHuaShangChuanRiQi;
    formState.value.shangChuanGangKou = resp.data.jiHuaShangChuanGangKou;
    formState.value.jieTiBeiZhu = resp.data.beiZhu;
  }
}

const handleChangeJieTiChuanYuan = (key,value) => {
  if(value){
    var user = chuanyuanList.value.find(obj => obj.id == value.key);
    formState.value.jieTiChuanYuanId = user.id
    formState.value.jieTiChuanYuanMing = user.xingMing
    formState.value.jieTiChuanYuanShenFenHao = user.shenFenHao
    formState.value.jieTiChuanYuanShouJiHao = user.shouJiHao
  }else{
    formState.value.jieTiChuanYuanId = ''
    formState.value.jieTiChuanYuanMing = ''
    formState.value.jieTiChuanYuanShenFenHao = ''
    formState.value.jieTiChuanYuanShouJiHao = ''
  }
}

const handleClose = () => {
  open.value = false;
  jieticheck.value = false
  formState.value = {
    id: "",
    xiaChuanRiQi: null,
    xiaChuanYuanYin: null,
    xiaChuanGangKou: "",
    xiaChuanBeiZhu:"",
    cunZaiJieTi: 0,
    jieTiChuanYuanId: "",
    jieTiChuanYuanMing: "",
    jianRenZhiWu: "",
    jieTiChuanYuanShenFenHao:"",
    jieTiChuanYuanShouJiHao:"",
    renZhiShuoMing: "",
    shangChuanRiQi: null,
    shangChuanGangKou: "",
    jieTiBeiZhu: ""
  }
}

defineExpose({
  handleOpen
})
</script>
<style lang="scss">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    border-radius: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    border-radius: 0;
    padding:0px;
  }
  .ant-modal-body {
    flex: 1;
  }
  .content-body{
    padding:20px 24px;
  }
}
</style>
